<template>
	<view class="page-address">
		<uni-nav-bar left-icon="left" :border="false" :title="$t('account.withdraw.heading_title')"
			:rightText="$t('account.withdraw.detail')" @clickLeft="proxy.$util.back"
			@clickRight="proxy.$util.navigateTo(`/pages/account/withdraw/records/records`)"></uni-nav-bar>
		<view class="form">
			<uni-forms ref="form" validate-trigger="bind" :modelValue="data.form" :border="true" :rules="data.rules"
				label-width="120px">

				<uni-forms-item :label="$t('account.withdraw.amount')" name="balance" required>
					<uni-easyinput :inputBorder="false" :clearable="false" type="number" v-model="data.form.balance"
						:placeholder="getPlaceholder('amount')" />
					<text class="all" @click="handleClickAll">全部</text>
				</uni-forms-item>

				<uni-forms-item :label="$t('account.withdraw.w_currency')" name="currency_id" required>
					<view class="form-select" @click="proxy.$util.navigateTo(`/pages/account/account/index?is_sel=1`)">
						<text
							v-if="data.form.currency_id">{{proxy.$util.getCurrencyType(data.form.currency_id)}}</text>
						<text v-else>{{getPlaceholder('w_currency')}}</text>
						<uni-icons type="right" color="#999" size="20"></uni-icons>
					</view>
				</uni-forms-item>

				<uni-forms-item :label="$t('account.withdraw.w_address')" name="address" required>
					<view class="form-select" @click="proxy.$util.navigateTo(`/pages/account/account/index?is_sel=1`)">
						<text v-if="data.form.address">{{data.form.address}}</text>
						<text v-else>{{getPlaceholder('w_address')}}</text>
					</view>
				</uni-forms-item>

				<uni-forms-item :label="$t('account.withdraw.collection_code')" name="qr_code" required>
					<!-- @click="changeAvatar" -->
					<view class="avatar-wrap">
						<image :src="data.form.qr_code" class="avatar-img" mode="aspectFit" />
					</view>
				</uni-forms-item>
			</uni-forms>
		</view>

		<view class="submit-wrap">
			<view @click="submit" class="btn-primary">{{ $t('common.btn_submit') }}</view>
		</view>
	</view>
</template>

<script setup>
	const {
		proxy
	} = getCurrentInstance()
	import {
		t
	} from '@/locale/index'
	import {
		requestHeader
	} from '@/common/util'
	import config from '@/config.js'
	import {
		onLoad
	} from "@dcloudio/uni-app";

	let id = 0;


	const getPlaceholder = (key) => {
		return t('common.please_enter') + t(`account.withdraw.${key}`);
	};

	const data = reactive({
		form: {
			currency_id: "",
			balance: "",
			qr_code: "",
			address: "",
		},
		accountBalance: "",
		settings: uni.getStorageSync('settings'),
		rules: {
			balance: {
				rules: [{
					required: true,
					errorMessage: getPlaceholder("amount"),
					trigger: 'blur'
				}, {
					validateFunction: function(rule, value, form, callback) {
						let withdrawSetting = data.settings.withdraw;
						// if (value > withdrawSetting.max_withdrawal) {
						// 	callback(t('account.withdraw.over_maxi_tips') + withdrawSetting
						// 		.max_withdrawal)
						// 	return false
						// }
						// if (value > parseFloat(data.accountBalance)) {
						// 	callback(t('account.withdraw.over_maxi_tips') + data.accountBalance)
						// 	return false
						// }
						// if (value < withdrawSetting.min_withdrawal) {
						// 	callback(t('account.withdraw.over_min_tips') + withdrawSetting
						// 		.min_withdrawal)
						// 	return false
						// }

						return true
					}
				}]
			},
			currency_id: {
				rules: [{
					required: true,
					errorMessage: getPlaceholder('w_currency'),
					trigger: 'blur'
				}]
			},
			qr_code: {
				rules: [{
					required: true,
					errorMessage: getPlaceholder('collection_code'),
					trigger: 'blur'
				}]
			},
			address: {
				rules: [{
					required: true,
					errorMessage: getPlaceholder('w_address'),
					trigger: 'blur'
				}]
			},
		},
	})

	const handleClickAll = () => {
		data.form.balance = data.accountBalance;
	};

	const changeAvatar = () => {
		const token = 'Authorization=Bearer ' + uni.getStorageSync('access-token');
		let baseUrl = config.apiBaseUrl

		// #ifdef H5
		baseUrl = 'api/'
		// #endif

		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'],
			sourceType: ['album', 'camera'],
			crop: {
				width: uni.getSystemInfoSync().windowWidth,
				height: uni.getSystemInfoSync().windowWidth,
			},

			success(res) {
				const tempFilePaths = res.tempFilePaths

				uni.showLoading()
				uni.uploadFile({
					url: baseUrl + 'files?type=qrcode',
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync('access-token'),
						'accept': 'application/json',
					},
					filePath: tempFilePaths[0],
					name: 'file',
					success(res) {
						const item = JSON.parse(res.data)
						data.form.qr_code = item.data.url
					},
					fail(res) {
						// uni.showToast({ title: self.t('upload') })
					},
					complete() {
						uni.hideLoading()
					},
				})
			},
		})
	}

	const submit = () => {
		proxy.$refs.form.validate().then(() => {
			proxy.$http.post(`withdraw`, data.form).then(res => {
				// console.log(res, "提交1");
				proxy.$util.msg(t('account.withdraw.withdraw_success'), proxy.$util.back);
			})
		})
	}

	onLoad((option) => {
		data.accountBalance = option.balance;
		uni.$once('selectAccount', (account) => {

			let {
				qr_code,
				currencie_id: currency_id,
				address,
				customer_id
			} = account;
			data.form = {
				...data.form,
				qr_code,
				currency_id,
				address,
				customer_id
			}
		})
	});
</script>

<style lang="scss" scoped>
	@import './withdraw.scss';
</style>